<template>
	<view class="">
		<view>
			<web-view  :src="url"></web-view>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				userid: '',
				live_id: '',
				url: ''
			}
		},
		onLoad(option) {
			console.log(option)
			this.userid = uni.getStorageSync('userInfo').id;
			this.live_id = option.id;
			this.url = 'http://pull.sigequanwangluokeji.com/live/'+option.id+'.flv'
		},
		methods:{
		
		}
	}
</script>

	

<style >
	.video {
	  width: 540px;
	  position: relative;
	  background: red;
	  padding: 0;
	  line-height: 0;
	}
	
	video {
	  width: 100%;
	  height: auto;
	  margin: 0;
	}
	
	.play-video {
	  cursor: pointer;
	  width: 40px;
	  height: 40px;
	  text-align: center;
	  text-decoration: none;
	  border-radius: 50%;
	  position: absolute;
	  left: calc(50% - 20px);
	  bottom: 20px;
	  z-index: 3;
	  color: #fff;
	  background: #a50034;
	}
	
	.play-video > i.material-icons {line-height: 40px;}
	.video {
	  width: 540px;
	  position: relative;
	  background: red;
	  padding: 0;
	  line-height: 0;
	}

	.video-div {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.controls-title {
		position: absolute;
		left: 20rpx;
		top: 60rpx;
	}
	.mark{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.mark-text{
		padding-right: 75px;
		font-size: 20px;
		color: #333333;
	}
	.mark-texts{
		line-height: 20px;
		line-height: 10px;
		font-size: 14px;
		height: 50px;
		width: 300px;
		color: white;
		background-color: #D4237A;
	}
	.text{
		text-align: center;
		padding-top: 400px;
		padding-bottom: 50px;
	}
	
	.add-shop{
		font-size: 16px;
		color: #333333;
		position: absolute;
		top: 20px;
		left: 20px;
		z-index:10;
	}
	.shop-list-but-box{
		position: absolute;
		bottom: 24rpx;
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: row;
	}
	.shop-list-but{
		color: white;
		border-radius: 20px;
		font-size: 24rpx;
		background-color: rgba(255,65,0,1);
		padding: 6px 10px;
		margin-right: 10px;
	}
	.mark-title{
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: left;
		display: inline-block;
		margin-left: 10px;
		font-size: 16px;
		font-weight: 700;
	}
	.shop-list-img{
		margin-right: 10px;
		width: 80px;
		height: 80px;
	}
	.shop-list-title{
		font-size: 32rpx;
		color: #333333;
		margin-top: 10px;
		line-height: 80rpx;
	}

	.shop-list-price{
		font-size: 16px;
		color: #ff4100;
		line-height: 30px;
		display: block;
	}
	.shop-list-box{
		position: relative;
		background-color: white;
		width: 100%;
		height: 600rpx;
		z-index: 2;
	}
	.shop-list-list{
		position: relative;
		padding-top: 5px;
		padding-bottom: 5px;
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		width: 96%;
		margin: 0 auto;
	}
	.scroll-Ys{
		height: 600rpx;
		width: 300rpx;
	}

	.scroll-Y{
		height: 420rpx;
		width: 400rpx;
	}
	cover-view{
		z-index: 5;
	}
	.but-img {
		width: 17px;
		height: 20px;
	}
	
	.meiyanbut {
		padding: 2;
		margin-left: 20rpx;
		display: inline-flex;
		align-items: center;
		justify-content:  flex-end; 
		flex-direction:row;
	}
	
	.but-text {
		padding-top: 3px;
		font-size: 13px;
		color: white;
	}
	
	.id {
		font-size: 14px;
		color: white;
	}
	
	.text-box {
		font-size: 12px;
		color: white;
	}
	
	.user-img {
		margin-right: 5px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}
	
	.mark-text {
		color: white;
		font-size: 20px;
	}
	
	.mark {
		position: fixed;
		top: 0px;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.but {
		background-color: rgba(0, 0, 0, .4);
		position: absolute;
		bottom: 0px;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
		z-index: 10;
	}
	
	.tui {
		width: 200px;
		height: 200px;
	
	}
	
	.arrow-box {
		position: fixed;
		top: 60px;
		left: 20px;
		z-index: 10;
		border-radius: 20px;
		background-color: rgba(0, 0, 0, .4);
	}
	
	.arrow-boxs {
		padding: 10px 20px 10px 20px;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: fixed;
		top: 60px;
		left: 140px;
		z-index: 10;
		border-radius: 30px;
		background-color: rgba(0, 0, 0, .4);
	}
	
	.jiesu {
		padding: 10px 20px 10px 20px;
		color: white;
		font-size: 16px;
	}
	
	.arrow {
		width: 15px;
		height: 15px;
	}
	.commodyti-box{
		width: 45px;
		height: 45px;
		background-color: rgba(255,255,255,0.2);
		border-radius: 45px;
		display: inline-flex;
		align-items: center;
		justify-content: center; 
	}
	.barrage{
		width: 80vw;
		display: flex;
		align-items: flex-start;
		justify-content: center; 
	}
	.barrage-input{
		width: 90%;
		height: 80upx;
		background-color: rgba(255,255,255,0.2);
		color: #FFFFFF;
		font-size: 14px;
		border-radius: 80rpx;
		padding-left: 30rpx;
	}
	
	
	
	/* 弹幕 */
	.input-box{
		padding: 20rpx 1%;
		background-color: #f2f2f2;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom: 0px;
		align-items: center;
		flex-direction: row;
		
	}
	.send{
		
		border-radius: 60rpx;
		margin-left: 20rpx;
		width: 100upx;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color:#eb632c;
		
	}
	.send-btn{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #ffffff;
	}


	.box{
		height: 80rpx;
		display: flex;
		align-items: flex-start;
		justify-content: center; 
		
	}
	.box-input{
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		color: #000;
		font-size: 14px;
		border-radius: 80rpx;
		padding-left: 30rpx;
	}
	.chat {
		position: fixed;
		z-index:10;
		bottom: 180rpx;
		height: 400rpx;
		
	text-align: justify;
	text-justify: newspaper;
	word-break: break-all;
	white-space: pre-wrap; 
	}

	.chat-username{
		color: white;
		font-size:15px;
		font-family:PingFang SC;
		/* font-weight:400; */
		color:rgba(255,80,122,1);
		overflow:hidden;
		white-space: nowrap;
	}
	.chat-usertext{
		font-size:15px;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		overflow:hidden;
		white-space: nowrap;
	}
	.chat-list{
		margin-left: 20rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		background-color: rgba(0,0,0,.2);
		padding:10rpx;
		border-radius: 30px;
	}
	
	
</style>
